前端入門，入門前端。學前端，如標題簡單。

嗨大家好
昨天的 VS Code 跟套件都有順利安裝了嗎？
還沒安裝的同學要記得先去安裝哦，因為我們今天要正式進入前端三大基礎架構的HTML了。

HTML

讓我們先來看看網路上是如何說明的：

引用自維基百科(https://zh.wikipedia.org/zh-tw/HTML)

HTML（Hypertext Markup Language），中文全名為「超文字標示語言」，是一種標記語言（markup language），而非一般熟知的程式設計語言；它會告訴瀏覽器該如何呈現你的網頁。是一種用來組織架構並呈現網頁內容的程式語言。

是不是聽起來非常文言呢？沒關係讓我們把他翻譯成白話文來看看：
HTML（Hypertext Markup Language）是一種用標籤的形式來完成的標記語言。

還是很文言嗎？沒關係，讓我們直接用個例子說明。

先請大家試著分析看看，下圖的新聞中，標題及各個段落分別在哪裡？

文章出處：自由體育(https://sports.ltn.com.tw/news/breakingnews/4430732)

解答在這裡

為什麼我們可以這麼輕易的找出來呢？因為根據我們的經驗，標題的文字會加大加粗放在最前面。底下內文有換行的便會是一個段落。我們依循的可能是外觀或是一些我們自己知道或是習慣的「規則」。試想看看，假如我們將這些「規則」拿掉後，還有辦法找出標題及各個段落嗎？

讓我們看看拿掉「規則」後，文章看起來的樣子。

與前面相比，沒有辦法非常明確的分辨出來。
當然或許有人會想說，我還是能分辨得出來，最前面有『中職》』這是分類，屬於標題，再來有『〔記者／桃園報導〕』所以是內文的開始。幾局上幾局下，就是一個新的段落。
仔細想想以上這些仍然依循著我們所知道的「規則」，若今天不是選擇新聞來舉例，而是擷取一篇文章或小說的一部份呢？

這就是瀏覽器（我們用來看網頁的東西，像是Chrome、Safari、Edge等等）看到文章時的樣子。因此我們需要去告訴瀏覽器哪裡是標題、哪裡是段落、哪裡是圖片、哪裡是什麼...... 那該如何做呢？

標籤

讓我們試著把文章各個部份分別標出來吧

就像這樣

再做一點整理：

既然每次都要重複打開始跟結束，不如用個符號直接代表結束吧。

下圖這樣我們就可以清楚知道，看到「/」代表結束，所以

夾在(標題) (/標題)中間的就是標題

夾在(段落) (/段落)中間的就是段落

「()」這種小括弧在程式中有不同的用途，所以讓我們改使用小於跟大於符號吧「<>」*

再把中文改成英文

糟糕，英文的段落有點長，擔心不小心拼錯該怎麼辦？

沒關係，我們用個縮寫p來代表段落吧

經過我們幾個步驟的修改，像 <p> </p>的寫法，就可以讓瀏覽器順利的閱讀這裡的內容，並呈現在網頁上了。
我們寫的 <title> </title> 和 <p> </p> 就是最前面在講解HTML時提到的「標籤」。
這邊補充說明一下，上面這則新聞的標題不應該使用 <title> </title> 標籤，只是想一步一步帶入標題的觀念，所以直接把"標題"翻譯成英文來使用。
<title> </title> 標籤的用途會在明天做說明哦。
至於該使用什麼標籤呢？讓我們繼續看下去。

讓我們再回頭看一次HTML的說明：
HTML（Hypertext Markup Language），中文全名為「超文字標示語言」，是一種標記語言（markup language），而非一般熟知的程式設計語言；它會告訴瀏覽器該如何呈現你的網頁。是一種用來組織架構並呈現網頁內容的程式語言。

再翻譯成白話文一次：
HTML是一種標記語言，就是用 <title> </title> 和 <p> </p> 這種標籤的方式告訴瀏覽器，我的頁面哪裡要放標題、哪裡放段落、哪裡放圖片、哪裡放影片......

特別注意，HTML是標記語言(可以想成做個標記或記號，告訴瀏覽器什麼地方是什麼)，不要當作程式語言(寫程式的語言)哦！

統整

**最後讓我們把標籤的規則稍微統整一下(只先統整目前學到的內容)：

1. 標籤的形式 <p> </p>
2. 標籤用 < > 這種括弧
3. 括弧中要用英文寫元素(標籤)的名稱(名稱有固定的寫法，明天開始會慢慢接觸到)
4. 標籤會有起始標籤跟結束標籤，結束標籤會多一個「/」
5. 起始標籤跟結束標籤中間夾的是內容**

經過上面一步一步的說明，相信大家對於HTML已經有了更清楚的認識了。明天我們會開始認識各種HTML標籤哦。